<template>
  <div>
    <sticky :className="'sub-navbar '+ 'draft'">
      <el-button  style="margin-left: 10px;" type="success"
        @click="handleCommand({ type:'submit', data: desc_info})"
        v-if="checkOperable(desc_info.project_status, 'apply') && isCreateId(desc_info.create_id)"
        >提交申请</el-button>
      <el-button  style="margin-left: 10px;" type="success"
        @click="handleCommand({ type:'back', data: desc_info})"
        v-if="checkOperable(desc_info.project_status, 'cancel') && isCreateId(desc_info.create_id)"
        >撤回申请</el-button> 
      <el-button  style="margin-left: 10px;" type="success"
        @click="handleCommand({ type:'check', data: desc_info})"
        v-if="checkOperable(desc_info.project_status, 'check') && (hasRoles(['PROJECT_INFO_MGMT', 'SUPER_ADMIN']) || isAllowMiniRole('CHECK_ALL', desc_info))"
        >审核</el-button>  
      <el-button  style="margin-left: 10px;" type="success"
        @click="handleCommand({ type:'success', data: desc_info})"
        v-if="checkOperable(desc_info.project_status,'complete') && (hasRoles(['PROJECT_INFO_MGMT', 'SUPER_ADMIN']) || businessOperable(desc_info) || isAllowMiniRole('CHECK_ALL', desc_info))"
        >成功/关闭</el-button>
      <el-button  style="margin-left: 10px;" type="success"
        @click="handleCommand({ type:'stop', data: desc_info})"
        v-if="checkOperable(desc_info.project_status, 'stop') && (hasRoles(['PROJECT_INFO_MGMT', 'SUPER_ADMIN']) || businessOperable(desc_info) || isAllowMiniRole('CHECK_ALL', desc_info)) " :command='{type:"stop", data: desc_info}'
        >暂停</el-button> 
      <el-button  style="margin-left: 10px;" type="success"
        @click="handleCommand({ type:'restart', data: desc_info})"
        v-if="checkOperable(desc_info.project_status, 'restart') && (hasRoles(['PROJECT_INFO_MGMT', 'SUPER_ADMIN'] || isAllowMiniRole('CHECK_ALL', desc_info) ) || businessOperable(desc_info))"
        >启动</el-button>       
    </sticky>  
    <div class="project-container" >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
        <span class="title">基本信息</span>
        </div>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>客户公司：</div></el-col>
          <el-col :span="8">
            <div  class='content'>{{desc_info.company_name}}</div>
          </el-col>
          <el-col :span="4"><div class='label'>创建者：</div></el-col>
          <el-col :span="8">
            <div class='content'>{{desc_info.create_name}}</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>所属部门：</div></el-col>
          <el-col :span="8">
            <div  class='content'>{{desc_info.dept_name ? desc_info.dept_name : '未知' }}</div>
          </el-col>
          <el-col :span="4"><div class='label'>创建时间：</div></el-col>
          <el-col :span="8">
            <div class='content'>{{desc_info.create_date | timeFilter('{y}-{m}-{d} {h}:{i}') }}</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>项目名称：</div></el-col>
          <el-col :span="8">
            <div class='content'>{{desc_info.project_name}}</div>
          </el-col>
          <el-col :span="4"><div class='label'>职能：</div></el-col>
          <el-col :span="8">
            <div class='content'>{{desc_info.function | jobFilter}}</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>优先级：</div></el-col>
          <el-col :span="8">
            <div class='content'>{{ desc_info.project_priority | projectPriorityFilter }}</div>
          </el-col>
          <el-col :span="4"><div class='label'>行业：</div></el-col>
          <el-col :span="8">
            <div  class='content'>{{desc_info.industry | industryFilter}}</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>项目状态：</div></el-col>
          <el-col :span="8">
            <div  class='content'>
              <el-tag>{{ desc_info.project_status | projectStatusFilter }}</el-tag>
            </div>
          </el-col>
        </el-row>
        <hr style="height:1px;border:none;border-top:1px solid ; color:#939393; width:90%;" />
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>城市：</div></el-col>
          <el-col :span="8">
            <div  class='content'>{{desc_info.city | cityValFilter }}</div>
          </el-col>
          <el-col :span="4"><div class='label'>需求量：</div></el-col>
          <el-col :span="8">
            <div class='content'>{{desc_info.recruitment_num}}</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>汇报对象：</div></el-col>
          <el-col :span="8">
            <div  class='content'>{{desc_info.leader ? desc_info.leader : '未知' }}</div>
          </el-col>
          <el-col :span="4"><div class='label'>下属人数：</div></el-col>
          <el-col :span="8">
            <div class='content'>{{desc_info.subordinates_num ? desc_info.leader : '未知' }}</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>是否全日制：</div></el-col>
          <el-col :span="8">
            <div  class='content'>{{ (desc_info.is_unified && desc_info.is_unified === '1') ? '是' : '否' }}</div>
          </el-col>
          <el-col :span="4"><div class='label'>性别要求：</div></el-col>
          <el-col :span="8">
            <div class='content'>{{ desc_info.sex | genderFilter }}</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>语言技能：</div></el-col>
          <el-col :span="8">
            <div  class='content'>
              <div v-if="language_level_group" class='content'>
                <span v-for="(item, index) in language_level_group" :key="item" >
                  {{ item | languageLevelFilter }}<span v-if="(index+1) !== language_level_group.length">,</span>
                </span> 
              </div>
            </div>
          </el-col>
          <el-col :span="4"><div class='label'>学历要求：</div></el-col>
          <el-col :span="8">
            <div class='content'>{{ desc_info.academic_qualification }}</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>专业要求：</div></el-col>
          <el-col :span="20">
            <div  class='content'>{{ desc_info.special_detail ? desc_info.special_detail : '未填' }}</div>
          </el-col>
        </el-row>

        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>税前：</div></el-col>
          <el-col :span="8">
            <div v-if="desc_info.min_annual_salary && desc_info.max_annual_salary" class='content'>{{ desc_info.min_annual_salary }}-{{ desc_info.max_annual_salary }}</div>
            <div v-else-if="desc_info.min_annual_salary" class='content'>下限{{ desc_info.min_annual_salary }}</div>
            <div v-else-if="desc_info.max_annual_salary" class='content'>上限{{ desc_info.max_annual_salary }}</div>
            <div v-else class='content'>未知</div>
          </el-col>
          <el-col :span="4"><div class='label'>薪资构成：</div></el-col>
          <el-col :span="8">
            <div  class='content'>{{ desc_info.salary_detail ? desc_info.salary_detail : '未知' }}</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>工作年限：</div></el-col>
          <el-col :span="8">
            <div v-if="desc_info.min_age && desc_info.max_age" class='content'>{{ desc_info.min_age }}-{{ desc_info.max_age }}</div>
            <div v-else-if="desc_info.min_age" class='content'>下限{{ desc_info.min_age }}</div>
            <div v-else-if="desc_info.max_age" class='content'>上限{{ desc_info.max_age }}</div>
            <div v-else class='content'>不限</div>
          </el-col>
          <el-col :span="4"><div class='label'>年龄：</div></el-col>
          <el-col :span="8">
            <div v-if="desc_info.min_year && desc_info.max_year" class='content'>{{ desc_info.min_year }}-{{ desc_info.max_year }}</div>
            <div v-else-if="desc_info.min_year" class='content'>下限{{ desc_info.min_year }}</div>
            <div v-else-if="desc_info.max_year" class='content'>上限{{ desc_info.max_year }}</div>
            <div v-else class='content'>不限</div>
          </el-col>
        </el-row>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="4"><div class='label'>招聘原因：</div></el-col>
          <el-col :span="20">
            <div class='content'>{{ desc_info.recruit_reason }}</div>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">寻访方向</span>
        </div>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="2"><div class='label'></div></el-col>
          <el-col :span="22"><div class='content'>{{ desc_info.search_direction ? desc_info.search_direction : '未填'  }}</div></el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">职位描述</span>
        </div>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="2"><div class='label'></div></el-col>
          <el-col :span="22"><div class='content'>{{ desc_info.jd_detail ? desc_info.jd_detail : '未填'  }}</div></el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">项目组主要成员</span>
        </div>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="2"><div class='label'>BD：</div></el-col>
          <el-col :span="6"><div class='content'>{{ (desc_info.company && desc_info.company.bd && desc_info.company.bd.username ) ? desc_info.company.bd.username : ''  }}</div></el-col>
          <el-col :span="2"><div class='label'>客户经理：</div></el-col>
          <el-col :span="6"><div class='content'>{{ getUsernameById (desc_info.client_manager )  }}</div></el-col>
          <el-col :span="2"><div class='label'>主要顾问：</div></el-col>
          <el-col :span="6"><div class='content'>{{ getUsernameById (desc_info.manager_consultant) }}</div></el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">顾问</span>
        </div>
        <el-row type="flex" justify='space-start' :gutter="10"> 
          <el-col :span="2"><div class='label'></div></el-col>
          <el-col :span="22">
            <div v-if="desc_info.consultant_group" class='content'>
              <span v-for="item in desc_info.consultant_group" :key="item.id" >
                {{getUsernameById (item.user_id)}}&nbsp;&nbsp;
              </span> 
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
        <el-dialog title="完成" :visible.sync="dialogCompleteVisible" >
      <el-form  :rules="complete_rules" ref="completeForm" :model="complete_temp" label-position="left" label-width="120px" style='width: 400px; margin-left:50px;'>
         <el-form-item label="项目">
          <span>
            {{this.selected_project_title}}
          </span>
        </el-form-item>
        <el-form-item label="项目完成备注" prop="remark" >
          <el-input type="textarea" :rows="4" size="small" v-model="complete_temp.remark" style="width: 280px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCompleteVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="completeProject()">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog title="撤回申请" :visible.sync="dialogBackVisible" >
      <el-form  :rules="back_rules" ref="backForm" :model="back_temp" label-position="left" label-width="120px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="项目">
          <span>
            {{this.selected_project_title}}
          </span>
        </el-form-item>
        <el-form-item label="撤回备注" prop="remark" >
          <el-input type="textarea" :rows="4" size="small" v-model="back_temp.remark" style="width: 280px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogBackVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="back()">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog title="重新启动项目" :visible.sync="dialogRestartVisible" >
      <el-form  :rules="restart_rules" ref="restartForm" :model="restart_temp" label-position="left" label-width="120px" style='width: 400px; margin-left:50px;'>
         <el-form-item label="项目">
          <span>
            {{this.selected_project_title}}
          </span>
        </el-form-item>
        <el-form-item label="备注" prop="remark" >
          <el-input type="textarea" :rows="4" size="small" v-model="restart_temp.remark" style="width: 280px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRestartVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="restartProject">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog title="暂停项目" :visible.sync="dialogStopVisible" >
      <el-form  :rules="stop_rules" ref="stopForm" :model="stop_temp" label-position="left" label-width="120px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="项目">
          <span>
            {{this.selected_project_title}}
          </span>
        </el-form-item>
        <el-form-item label="备注" prop="remark" >
          <el-input type="textarea" :rows="4" size="small" v-model="stop_temp.remark" style="width: 280px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogStopVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="stopProject()">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog title="审批" :visible.sync="dialogCheckVisible" append-to-body>
      <el-form :rules="check_rules" ref="checkForm" :model="check_temp" label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="项目">
          <span>
            {{this.selected_project_title}}
          </span>
        </el-form-item>
        <el-form-item label="是否同意" required error="必须选择是否同意" prop="status">
          <el-radio v-model="check_temp.status" label="approved">同意</el-radio>
          <el-radio v-model="check_temp.status" label="no_pass">拒绝</el-radio>
        </el-form-item>
        <el-form-item label="备注" >
          <el-input type="textarea" v-model="check_temp.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCheckVisible = false">取 消</el-button>
        <el-button type="primary" @click="check()">确 定</el-button>
      </div>
    </el-dialog>
    <ProjectDialog :id="dialog_id" :visible="dialog_visible" :status="dialog_status" @closeDialog="handleCloseDialog"> </ProjectDialog>
  </div>
</template>
<script>
import API from '@/utils/backend_api'
import Sticky from '@/components/Sticky'
import Static_Data from '@/data/index'
import checkPermission from '@/utils/permission'
import ProjectDialog from '@/views/project/components/projectDialog'
export default {
  name: 'projectTodo',
  components: { Sticky, ProjectDialog },
  data() {
    return {
      id: '',
      allUserOptions: this.$store.getters.usersList.map(item => ({ value: item.id, label: item.username + '(' + item.uid + ')', username: item.username })),
      desc_info: {},
      language_level_group: [],
      current_user_id: this.$store.getters.userId,
      current_user_roles: this.$store.getters.roles,
      current_users_group: this.$store.getters.usersList,
      MiniRole: Static_Data.mini_roles,
      selected_project_title: '',
      dialogRestartVisible: false,
      dialog_id: '',
      dialog_visible: false,
      dialog_status: '',
      restart_rules: {
        remark: [
          { required: true, message: '必须填写', trigger: 'change' }
        ]
      },
      restart_temp: { id: '', remark: '' },
      dialogStopVisible: false,
      stop_rules: {
        remark: [
          { required: true, message: '必须填写', trigger: 'change' }
        ]
      },
      stop_temp: { id: '', remark: '' },
      check_temp: {
        id: '',
        status: 'approved',
        remark: ''
      },
      back_temp: {
        id: '',
        remark: ''
      },
      complete_temp: {
        id: '',
        remark: ''
      },
      complete_rules: {},
      check_rules: {},
      back_rules: {
        remark: [
          { required: true, message: '必须填写理由', trigger: 'change' }
        ]
      },
      dialogCompleteVisible: false,
      dialogCheckVisible: false,
      dialogBackVisible: false
    }
  },
  created() {
    const params = this.$route.params
    if (params.id) {
      this.id = params.id
      API.project.get(this.id).then(response => {
        this.desc_info = response.data
        if (this.desc_info.language_level_group) {
          this.language_level_group = JSON.parse(this.desc_info.language_level_group)
        }
      })
    } else {
      this.$message.error('项目id不存在')
      return
    }
  },
  methods: {
    authMiniRole(miniRolekey, dept, office) {
      const isHasMiniRoleOffice = this.current_user_roles.some(my_role => my_role === (miniRolekey + '_' + this.MiniRole.MINI_P_OFFICE + '_' + office)) ||
        this.current_user_roles.some(my_role => my_role === (miniRolekey + '_' + this.MiniRole.MINI_P_OFFICE + '_ALL'))
      const isHasMiniRoleDept = this.current_user_roles.some(my_role => my_role === (miniRolekey + '_' + this.MiniRole.MINI_P_DEPT + '_' + dept)) ||
        this.current_user_roles.some(my_role => my_role === (miniRolekey + '_' + this.MiniRole.MINI_P_DEPT + '_ALL'))
      console.log('authMiniRole:', miniRolekey, isHasMiniRoleOffice, isHasMiniRoleDept, (isHasMiniRoleOffice && isHasMiniRoleDept))
      return (isHasMiniRoleOffice && isHasMiniRoleDept)
    },
    isAllowMiniRole(key, data) {
      if (data.create_id && data.create_id !== '') {
        let own_user = {}
        this.current_users_group.map(current_item => {
          if (current_item.id === data.create_id) {
            own_user = current_item
          }
        })
        // console.log('own_user:', own_user)
        return this.authMiniRole(key, own_user.department_id, own_user.office)
      }
      return false
    },
    businessOperable(data) {
      return data.business_roles && data.business_roles.some((item) => (item === 'bd' || item === 'client_manager'))
    },
    hasRoles(roles) {
      return this.current_user_roles.some(item => roles.indexOf(item) >= 0)
    },
    isCreateId(create_id) {
      return create_id === this.current_user_id
    },
    checkOperable(status, action) {
      if (status && action) {
        let action_group = []
        Static_Data.project_status.map(item => {
          if (item.key === status) {
            action_group = item.actions
          }
        })
        if (action_group.indexOf(action) < 0) {
          return false
        }
        return true
      } else {
        return false
      }
    },
    checkPermission,
    getUsernameById(id) {
      let username = ''
      if (id && id !== '') {
        this.allUserOptions.map(item => {
          if (item.value === id) {
            username = item.username
          }
        })
      }
      return username
    },
    handleCommand(val) {
      this.selected_project_title = val.data.project_name + '(' + val.data.company_name + ')'
      console.log('handleCommand =', val)
      if (val.type && val.data && val.type === 'submit') {
        this.handleSubmit(val.data)
      }
      if (val.type && val.data && val.type === 'back') {
        this.handleBack(val.data)
      }
      if (val.type && val.data && val.type === 'check') {
        this.handleCheck(val.data)
      }
      if (val.type && val.data && val.type === 'success') {
        this.handleComplete(val.data)
      }
      if (val.type && val.data && val.type === 'restart') {
        this.handleRestart(val.data)
      }
      if (val.type && val.data && val.type === 'stop') {
        this.handleStop(val.data)
      }
    },
    handleCloseDialog(val) {
      this.dialog_visible = false
      this.dialog_id = ''
    },
    back() {
      this.$refs['backForm'].validate((valid) => {
        if (valid) {
          API.project.back(this.back_temp.id, this.back_temp).then(response => {
            this.desc_info = response.data
            this.resetTemp()
            this.$message({
              type: 'success',
              message: '撤回成功!'
            })
            this.dialogBackVisible = false
          })
        }
      })
    },
    restartProject() {
      this.$refs['restartForm'].validate((valid) => {
        if (valid) {
          API.project.restart(this.restart_temp.id, this.restart_temp).then(response => {
            this.desc_info = response.data
            this.$message({
              type: 'success',
              message: '启动成功!'
            })
            this.dialogRestartVisible = false
          })
        }
      })
    },
    stopProject() {
      this.$refs['stopForm'].validate((valid) => {
        if (valid) {
          API.project.stop(this.stop_temp.id, this.stop_temp).then(response => {
            this.desc_info = response.data
            this.$message({
              type: 'success',
              message: '暂停成功!'
            })
            this.dialogStopVisible = false
          })
        }
      })
    },
    resetTemp() {
      this.temp = {}
    },
    check() {
      this.$refs['checkForm'].validate((valid) => {
        if (valid) {
          if (this.check_temp.status === 'approved') {
            API.project.pass(this.check_temp.id, this.check_temp).then(response => {
              this.desc_info = response.data
              this.resetTemp()
              this.$message({
                type: 'success',
                message: '成功!'
              })
              this.dialogCheckVisible = false
            })
          }
          if (this.check_temp.status === 'no_pass') {
            API.project.no_pass(this.check_temp.id, this.check_temp).then(response => {
              this.desc_info = response.data
              this.resetTemp()
              this.$message({
                type: 'success',
                message: '打回成功!'
              })
              this.dialogCheckVisible = false
            })
          }
        }
      })
    },
    handleComplete(row) {
      if (row && row.id) {
        this.complete_temp = { id: row.id, remark: '' }
        this.dialogCompleteVisible = true
      }
      this.$nextTick(() => {
        this.$refs['completeForm'].clearValidate()
      })
    },
    handleRestart(row) {
      if (row && row.id) {
        this.restart_temp = { id: row.id, remark: '' }
        this.dialogRestartVisible = true
      }
      this.$nextTick(() => {
        this.$refs['restartForm'].clearValidate()
      })
    },
    handleStop(row) {
      if (row && row.id) {
        this.stop_temp = { id: row.id, remark: '' }
        this.dialogStopVisible = true
      }
      this.$nextTick(() => {
        this.$refs['stopForm'].clearValidate()
      })
    },
    completeProject() {
      this.$refs['completeForm'].validate((valid) => {
        if (valid) {
          API.project.complete(this.complete_temp.id, this.complete_temp).then(response => {
            this.desc_info = response.data
            this.resetTemp()
            this.$message({
              type: 'success',
              message: '成功!'
            })
            this.dialogCompleteVisible = false
          })
        }
      })
    },
    handleBack(row) {
      if (row && row.id) {
        this.back_temp = { id: row.id, remark: '' }
        this.dialogBackVisible = true
      }
      this.$nextTick(() => {
        this.$refs['backForm'].clearValidate()
      })
    },
    handleCheck(row) {
      if (row && row.id) {
        this.check_temp = { id: row.id, status: 'approved', remark: '' }
        this.dialogCheckVisible = true
      }
      this.$nextTick(() => {
        this.$refs['checkForm'].clearValidate()
      })
    },
    handleSubmit(row) {
      if (row && row.id) {
        this.dialog_id = row.id
        this.dialog_visible = true
        this.dialog_status = 'submit'
      }
    }
  }
}
</script>
<style scoped>
  .invoice-container{
    padding: 10px 20px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .el-col {
    margin: 2px 0 4px;
  }
  .el-card{
    margin: 2px 0 4px;
  }

  .label {
    text-align:right;
    color:#939393;
    font-weight:normal;
  }
</style>

